<template>
	<view class="p-x-10">
		<u-collapse :value="showMoreKeys" ref="collapse" class="p-b-10">
			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">穿爆统计</text></view>
				</template>
				<my-grid :list="gridList" :col="3" imgWidth="30%"></my-grid>
			</u-collapse-item>

			<u-collapse-item name="2">
				<template #title>
					<view class="content-item-title"><text class="title-txt">智能钻孔</text></view>
				</template>
				<uni-data-select v-model="zkSelect" :localdata="list" @change="changeFn"></uni-data-select>
				<my-grid :list="gridList2" decimals="1" :col="3" class="m-t-10" />
			</u-collapse-item>

			<u-collapse-item name="3">
				<template #title>
					<view class="content-item-title"><text class="title-txt">爆破区实时监控</text></view>
				</template>
				<my-play-video-list
					:list="['967bcc4b3d7d4e7e917a1cbb499e1d03', '714a4e3944a54be8be31424a8870c1e0', '4c973b8e3cdb49b78b11be577872f5f1']"
					@DataQuery="() => collapse.init()"
				/>
			</u-collapse-item>

			<u-collapse-item name="4">
				<template #title>
					<view class="content-item-title"><text class="title-txt">告警信息展示</text></view>
				</template>
				<my-table :data="tableList" :columns="columns" />
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
import { getByApiCode } from '@/api/customApi';

const collapse = ref(null),
	showMoreKeys = ref([1, 2, 3, 4]);

const gridList = ref([
	{
		img: 'work/zncb/1.png',
		title: '爆破方量',
		value: 0,
		unit: '万m³'
	},
	{
		img: 'work/zncb/2.png',
		title: '打孔数',
		value: 0,
		unit: '个'
	},
	{
		img: 'work/zncb/3.png',
		title: '装药量',
		value: 0,
		unit: '吨'
	}
]);

function fn1() {
	getByApiCode({
		apiCode: 'chuankongbaopotongji',
		propertyMapping: {
			s: 'name',
			y: 'val'
		}
	}).then((res) => {
		res.data.forEach((item) => {
			item.key = item.s;
			item.val = item.y;
			delete item.s;
			delete item.y;
		});
		const data = ArrayToObj(res.data);
		gridList.value.forEach((item) => {
			item.value = data[item.title];
		});
	});
}
/****************************************************钻孔数据*******************************************/
const zkSelect = ref(''),
	list = ref([]);

function fn2() {
	getByApiCode({
		apiCode: 'zjsj',
		propertyMapping: {
			text: 'DRILL_ID',
			value: 'DRILL_ID'
		}
	}).then((res) => {
		list.value = res.data;
		zkSelect.value = list.value[0].value;
		changeFn();
	});
}

const gridList2 = ref([
	{
		key: 'ECU_WORKTIME',
		title: '工作小时',
		value: '0',
		unit: 'h'
	},
	{
		key: 'ECU_RY_HEIGHT',
		title: '燃油液位',
		value: '0',
		unit: '%'
	},
	{
		key: 'ECU_YYY_TEMP',
		title: '液压油温',
		value: '0',
		unit: 'v'
	},
	{
		key: 'ECU_XTDY',
		title: '系统电压',
		value: '0',
		unit: 'v'
	},
	{
		key: 'ECU_X',
		title: 'X角度',
		value: '0',
		unit: '°'
	},
	{
		key: 'ECU_Y',
		title: 'Y角度',
		value: '0',
		unit: '°'
	},
	{
		key: 'ECU_WARNING',
		title: '报警信息',
		value: '0',
		unit: ''
	},
	{
		key: 'ENGINE_ZS',
		title: '发动机转速',
		value: '0',
		unit: 'rpm'
	},
	{
		key: 'ENGINE_RHY_HEIGHT',
		title: '润滑油液位',
		value: '0',
		unit: '%'
	},
	{
		key: 'ENGINE_RHY_PRESS',
		title: '润滑油压力',
		value: '0',
		unit: 'Kpa'
	},
	{
		key: 'ENGINE_LQY_HEIGHT',
		title: '冷却液液位',
		value: '0',
		unit: '%'
	},
	{
		key: 'ENGINE_LQY_TEMP',
		title: '冷却剂温度',
		value: '0',
		unit: '℃'
	},
	{
		key: 'ENGINE_AIR',
		title: '大气压力',
		value: '0',
		unit: 'Kpa'
	},
	{
		key: 'ENGINE_BREAK_COUNT',
		title: '故障数量',
		value: '0',
		unit: '%'
	},
	{
		key: 'COMPRESSOR_YY_TEMP',
		title: '油液温度',
		value: '0',
		unit: '℃'
	}
]);

function changeFn() {
	if (zkSelect.value) {
		getByApiCode({
			apiCode: 'zjxxxx',
			params: [
				{
					code: 'DRILL_ID',
					value: zkSelect.value
				}
			],
			propertyMapping: {
				key: 'type',
				val: 'val'
			}
		}).then((res) => {
			const data = ArrayToObj(res.data);
			gridList2.value.forEach((item) => {
				item.value = data[item.key];
			});
		});
	}
}

const tableList = ref([]),
	columns = [
		{
			label: '告警名称',
			prop: 'alarm',
			width: '80'
		},
		{
			label: '告警类型',
			prop: 'alarmtype',
			width: '150'
		},
		{
			label: '级别',
			prop: 'class',
			width: '50'
		},
		{
			label: '状态',
			prop: 'state',
			width: '70'
		}
	];

function fn3() {
	getByApiCode({
		apiCode: 'znbpgjxx',
		pageIndex: 1,
		pageSize: 4,
		propertyMapping: {
			alarm: 'alarm',
			alarmtype: 'alarmtype',
			class: 'class',
			state: 'state'
		},
		total: true
	}).then((res) => {
		tableList.value = res.data;
		nextTick(() => {
			collapse.value.init();
		});
	});
}

function getServerData(refresh) {
	Promise.all([fn1(), fn2(), fn3()]).then(() => {
		if (refresh) {
			nextTick(() => {
				uni.stopPullDownRefresh();
			});
		}
	});
}

onShow(() => {
	getServerData();
});

onPullDownRefresh(() => {
	getServerData(true);
});
</script>

<style scoped lang="scss">
.charts-box {
	height: 400rpx;
}

:deep(.u-collapse-item .u-cell) {
	background-image: url('@/static/img/header.png');
	background-size: 100% 100%;
}

.cat-box {
	height: 440rpx;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 10rpx;

	.list {
		border: 1px solid #ccc;
		background-color: #f5f7fe;
	}
}

.cat-bottom {
	background-color: #f5f7fe;
	border-radius: 8rpx;
}
</style>
